<template>
  <a-card>
    <template #extra>
      <a-space>
        <a-button icon="reload" @click="fetchData()" :loading="loading">{{ $t('refresh') }}
        </a-button>
      </a-space>
    </template>

    <a-table :bordered="false" size="middle" :columns="columns" :data-source="data" :row-key="record => record.distributor" :loading="loading" :pagination="false">
      <template slot="distributor" slot-scope="text, record">
        <a @click="showForm(record)">{{ text }}</a>
      </template>
      <a-icon slot="isonline" slot-scope="text" :type="text?'check-circle':'close-circle'" :style="text?'color:#52c41a;font-size: 18px;':'font-size: 18px;'"/>
      <template slot="isSellingPrice" slot-scope="text, record">
        <span v-if="text === 1">{{ $t("卖价抽佣") }},{{ (record.commissionRate * 100) + '%'}}</span>
        <span v-else>{{ $t("底价结算") }}</span>
      </template>
      <template v-for="(item, index) in columns" :slot="item.slotName">
        <span :key="index">{{ $t(item.slotName) }}</span>
      </template>
      <template #expandedRowRender="record">
        <p style="margin: 0">
          {{ record.configData}}
        </p>
      </template>
    </a-table>

    <a-modal v-model="editVisible" :maskClosable="false" :title="$t('edit')" :okText="$t('submit')" @ok="saveForm()" @cancel="closeForm()" :confirm-loading="submitLoading">
      <a-form-model ref="updateForm" layout="vertical" :model="updateForm" autocomplete="off" >
        <a-form-model-item prop="isonline" :label="$t('sale_status')">
          <a-switch v-model="updateForm.isonline">
          </a-switch>
        </a-form-model-item>
        <a-form-model-item prop="remark" :label="$t('remark')">
          <a-input v-model="updateForm.remark">
          </a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>

  </a-card>
</template>

<script>
import {getConfigList,saveConfig} from '@/services/distributor'

export default {
  name: "DistributorConfigList",
  i18n: require('../i18n'),
  data() {
    return {
      loading: false,
      data: [],
      submitLoading: false,
      columns: [
        {
          dataIndex: 'distributorGroup',
          align: 'left',
          slotName: "group",
          slots: {title: 'group'},
          sorter: (a, b) => a.distributorGroup.localeCompare(b.distributorGroup),
        },
        {
          dataIndex: 'distributor',
          align: 'left',
          slotName: "distributor",
          slots: {title: 'distributor'},
          scopedSlots: {customRender: 'distributor'},
          sorter: (a, b) => a.distributor.localeCompare(b.distributor),
        },
        {
          dataIndex: 'remark',
          align: 'left',
          slotName: "remark",
          slots: {title: 'remark'},
        },
        {
          dataIndex: 'isonline',
          align: 'center',
          slotName: "sale_status",
          slots: {title: 'sale_status'},
          scopedSlots: {customRender: 'isonline'},
        },
        {
          dataIndex: 'isSellingPrice',
          align: 'center',
          slotName: "commission_type",
          slots: {title: 'commission_type'},
          scopedSlots: {customRender: 'isSellingPrice'},
        },
      ],
      editVisible: false,
      updateForm: {},
    }
  },
  methods: {
    fetchData(){
      this.loading = true
      getConfigList().then(res => {
        this.data = res.data.data
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    showForm(record) {
      this.editVisible = true
      this.updateForm = JSON.parse(JSON.stringify(record))
    },
    saveForm() {
      this.confirmLoading = true
      //this.updateForm.isonline = this.updateForm.isonline?1:0
      saveConfig(this.updateForm).then(res => {
        if (res.data.success) {
          this.$message.success({content: this.$t('submitSuccess')})
          this.closeForm()
          this.fetchData()
        } else {
          this.$message.error({content: this.$t(res.data.message)})
        }
      }).catch(error => {
        console.log(error)
      })
    },
    closeForm() {
      this.confirmLoading = false
      this.editVisible = false
      this.updateForm = {}
    },
  },
  created() {
    this.fetchData()
  },
}
</script>